﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simple Layout Demo</title>
    <link href="../../Content/themes/UILayout/layout-default-latest.css" rel="stylesheet"
        type="text/css" />
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.layout-latest.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('body').layout();
        });

    </script>
</head>
<body>
    <div class="ui-layout-north">
        This is the north pane
    </div>
    <div class="ui-layout-west">
        This is the west pane
    </div>
    <div class="ui-layout-east">
        This is the east pane BOTTOM OF EAST PANE</p>
    </div>
    <div class="ui-layout-center">
        @RenderBody()
        If you Print Preview this page, it will print like this...
        <p>
            END OF CENTER PANE</p>
    </div>
    <div class="ui-layout-south">
        This is the south pane
    </div>
</body>
</html>
